<template>
  <div id="account">
    <div class="account-top">
      <h3>账户</h3>
      <el-button type="primary" @click="dialogFormVisible = true"
        >新增</el-button
      >
      <el-button type="primary" @click="able(ids)">启用</el-button>
      <el-button type="warning" @click="disable(ids)">禁用</el-button>
    </div>
    <div class="account-content">
      <el-table
        height="500px"
        :data="accounts"
        border
        style="width: 100%; font-size: 13px; margin-left: 20px"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="accountCode" label="账户编号" width="200">
        </el-table-column>
        <el-table-column prop="accountName" label="账户名称" width="200">
        </el-table-column>
        <el-table-column prop="presentMoney" label="当前余额" width="150">
        </el-table-column>
        <el-table-column
          prop="accountDate"
          label="建账日期"
          width="120"
        >
        </el-table-column>
        <el-table-column prop="aTypeName" label="账户类别" width="120">
        </el-table-column>
        <el-table-column prop="isDefault" label="是否默认" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.isDefault === 1">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="是否启用" width="120">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#66b1ff"
              inactive-color="#c1c1c1"
              :active-value="1"
              :inactive-value="2"
              @change="handleStatusChange(scope.row)"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="de(scope.row)" type="text" size="small"
              >删除</el-button
            >
            <el-button type="text" size="small" @click="up(scope.row.accountId)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog
      width="750px"
      top="20px"
      title="新增账户"
      :visible.sync="dialogFormVisible"
    >
      <AddAccount ref="addAccount"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="qu()">取 消</el-button>
        <el-button type="primary" @click="sure()"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import AddAccount from "./AddAccount.vue";

export default {
  name: "Account",
  components: {
    AddAccount,
  },
  data() {
    return {
      aId:'',
      dialogFormVisible: false,
      accounts: [],
      selection: [],
      ids: [],
    };
  },
  methods: {
    disable(ids) {
      if (ids.length <= 0) {
        this.$message({
          showClose: true,
          message: "请选择部门",
          type: "error",
        });
        return;
      }
      this.upsta(ids, 2);
    },
    able(ids) {
      if (ids.length <= 0) {
        this.$message({
          showClose: true,
          message: "请选择部门",
          type: "error",
        });
        return;
      }
      this.upsta(ids, 1);
    },
    upsta(ids, status) {
      this.axios({
        url: "/info/account/updateStatus",
        params: {
          ids: ids.toString(),
          status,
        },
      }).then((rs) => {
        if (rs.data.code === 200) {
          this.selectAll();
          this.$message({
            showClose: true,
            message: "设置成功",
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: "设置失败",
            type: "error",
          });
        }
      });
    },
    handleStatusChange(depart) {
      let ids = [];
      ids.push(depart.accountId);
      const status = depart.status;
      this.upsta(ids, status);
    },
    handleSelectionChange(selection) {
      console.log(selection);
      this.ids = selection.map((item) => item.accountId);
      console.log("IDs:", this.ids);
      this.selection = selection;
    },
    de(account) {
      this.$confirm("此操作将删除该部门, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
            this.axios({
              url: "/info/account/updateStatus",
              params: {
                status: 0,
                ids: account.accountId,
              },
            }).then((rs) => {
              if (rs.data.code === 200) {
                this.selectAll();
                this.$message({
                  showClose: true,
                  message: "删除成功",
                  type: "success",
                });
              } else {
                this.$message({
                  showClose: true,
                  message: "删除失败",
                  type: "error",
                });
              }
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    qu(){
      this.$refs.addAccount.letNull();
      this.aId=''
      this.dialogFormVisible = false
    },
    async sure() {
      const flag = await this.$refs.addAccount.addAndUp();
      if (flag == true) {
        this.dialogFormVisible = false;
        this.selectAll();
        this.aId=''
      }
    },
    up(id) {
      this.dialogFormVisible = true;
      this.aId=id
      this.$nextTick(() => {
        if (this.$refs.addAccount) {
          this.$refs.addAccount.selectById(id);
        }
      });
    },
    selectAll() {
      this.axios({
        url: "/info/account/selectAll",
      }).then((rs) => {
        this.accounts = rs.data.accounts;
      });
    },
  },
  created() {
    this.selectAll();
  },
};
</script>

<style scoped>
#account {
  width: 100%;
  height: 100%;
}

.account-top {
  width: calc(100% -20px);
  height: 60px;
  /* background-color: pink; */
  line-height: 60px;
  padding-left: 20px;
  font-size: 13px;
}

.account-top h3 {
  display: inline-block;
  margin-right: 1000px;
}

.account-content {
  width: 100%;
  height: calc(100% - 60px);
  /* background-color: skyblue; */
}

.el-input,
.el-button {
  font-size: 13px;
}
</style>